<template>
    <div>
        <div class="file-tbales-container">
            <div  @click="$emit('folderClick', item)" class="folder-container"  v-for="(item, i) in list[0]" :key="item.name + i">
                <div style="height:50px;width:50px;background-size:cover;" class="dir"></div>
                <div class="text">{{item.name}}</div>
            </div>
            <div @click="$emit('fileClick', item)" class="file-container" v-for="(item, i) in list[1]" :key="item.name + i">
                <div style="height:50px;width:50px;background-size:cover;" :class="`file type-${item.suffix}`"></div>
                <div class="text">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import '../css/FileIcon.css'
export default {
    props: {
        list: {
            type: Array,
            default: () => { return [] }
        }
    },
    data() {
        return {}
    }
}
</script>

<style lang="less" scoped>
.file-tbales-container {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
    align-items: start;
    grid-gap: 10px 10px;
    transition: all 0.5s;
    .text {
        margin-top:5px;
        width: 100px;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: 12px;
    }
    .folder-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    .folder-container:hover {
        background: #f6f6f6;
        cursor: pointer;
    }
    .file-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    .file-container:hover {
        background: #f6f6f6;
        cursor: pointer;
    }
}
</style>
